<template>
  <div class="w-full">
    <div>
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>

        <el-breadcrumb-item>
          <span class="text-[#EF6800]">修改密码</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div
      class="w-full bg-white h-[900px] mt-[15px] pt-[25px] px-[25px] relative"
    >
      <div class="flex items-center">
        <div class="w-[4px] h-[16px] bg-[#EF6800]"></div>
        <div class="text-[20px] ml-[10px]">修改密码</div>
      </div>
      <div class="flex items-center justify-center mt-[134px]">
        <div class="w-[500px]">
          <el-form
            :model="form"
            ref="formRef"
            :rules="rules"
            label-width="80px"
            :inline="false"
          >
            <el-form-item label="当前密码" prop="old_pwd">
              <el-input
                v-model="form.old_pwd"
                class="w-[383px]"
                placeholder="请输入原密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
              <el-input
                v-model="form.password"
                class="w-[383px]"
                placeholder="请输入新密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPsd">
              <el-input
                v-model="form.confirmPsd"
                class="w-[383px]"
                placeholder="请再次输入新密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <div class="mt-[40px] w-full flex justify-center items-center">
                <div
                  class="w-[70px] h-[30px] flex justify-center items-center border-[#BEBEBE] border rounded-[4px] text-[#A0A0A0] text-[14px] cursor-pointer"
                >
                  取消
                </div>
                <div
                  @click="submit(formRef)"
                  class="w-[70px] ml-[50px] h-[30px] flex justify-center items-center rounded-[4px] text-white text-[14px] bg-[#EF6800] cursor-pointer"
                >
                  确定
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ArrowRight } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";
import { ref, reactive, inject } from "vue";
import { setPwd } from "@/utils/api";
import { useUserStore } from "@/store/index";
import { useRouter } from "vue-router";
interface Form {
  old_pwd: string;
  password: string;
  confirmPsd: string;
}

const form = reactive<Form>({
  old_pwd: "",
  password: "",
  confirmPsd: "",
});
const router = useRouter();
const store = useUserStore();
const message = inject<any>("message");
const formRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  old_pwd: [{ required: true, message: "请输入原密码", trigger: "blur" }],
  password: [{ required: true, message: "请输入新密码", trigger: "blur" }],
  confirmPsd: [
    { required: true, message: "请再次输入新密码", trigger: "blur" },
  ],
});

const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (e) => {
    if (e) {
      const res = await setPwd(form);
      // console.log(res);
      if (res.code == 1) {
        message.success(res.msg);
        store.userInfo.user_name = "";
        router.push("/index/home");
      } else {
        message.warn(res.msg);
      }
    }
  });
};
</script>
